/****************
运行指标
* */
<template>
  <basic-container>
    <el-row>
      <targetExaminHead :sign="{ a: false, b: false, c:false ,d:false ,e: true}" />
    </el-row>
    <el-row style="margin:25px 0 0 0 ;">
      <div :height="searchheight">
        <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">
          {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i
            :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          />
        </span>
        <div v-show="searchadvanced">
          <el-form
            :inline="true"
            :model="searchForm"
            @keyup.enter.native="getDataList()"
            class="form-inline"
          >
            <el-form-item label="考核名称">
              <el-input v-model="searchForm.gzmc" placeholder="工作名称" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="编号">
              <el-input v-model="searchForm.bh" placeholder="编号" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                class="marginLeft"
                @click="getDataList(1)"
              >检索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-row>
    <el-row>
      <div style="height: 50px; border-bottom: 1px solid #b0bde2">
        <div class="pull-right">
          <el-button type="primary" @click="exportData">导出</el-button>
        </div>
      </div>
    </el-row>
    <el-row>
      <el-table
        style="width: 100%;margin-top:20px"
        :data="dataList"
        border
        stripe
        header-align="center"
        v-loading="dataListLoading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" header-align="center" width="55"></el-table-column>
        <el-table-column type="index" header-align="center" align="center" label="序号" width="55"></el-table-column>
        <el-table-column prop="bh" align="center" label="员工编号"></el-table-column>
        <el-table-column prop="sjbt" align="center" label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="realname" align="center" label="部门" show-overflow-tooltip></el-table-column>
        <el-table-column prop="realname" align="center" label="运行指标" show-overflow-tooltip></el-table-column>
        <el-table-column prop="realname" align="center" label="权重和" show-overflow-tooltip></el-table-column>
        <el-table-column prop="realname" align="center" label="状态" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" fixed="right" min-width="120" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain size="small" @click="dataView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageData.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageData.pageSize"
          :total="pageData.totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </el-row>
  </basic-container>
</template>

<script>
import targetExaminHead from "@/views/dailyExamine/components/targetExaminHead"; //转态头
export default {
  data() {
    return {
      searchheight: "0", //搜索组件的高度
      searchadvanced: true, //搜索的显隐
      searchForm: {}, //搜索对象
      addVisible: false, //
      dataListLoading: false, //表格是否加载
      dataList: [], //表格数组
      multipleSelection: [], //勾选数据
      pageData: {
        //分页对象
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      }
    };
  },
  components: {
    targetExaminHead //状态头
  },
  methods: {
    //   查看
    dataView() {},
    // 提交
    exportData() {},
    // 查询条件的展开关闭
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 查询列表
    getDataList() {},
    // 勾选数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 条数变化
    sizeChangeHandle(val) {
      this.pageData.pageSize = val;
      this.getDataList();
    },
    // 页码分页变化
    currentChangeHandle(val) {
      this.pageData.pageIndex = val;
      this.getDataList();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-select__tags {
  overflow: auto !important;
  //   min-height: 200px !important;
}
::v-deep.el-tag.el-tag--info {
  margin: 5px;
  border: 1px solid green;
}
</style>